<template>
  <div class="login">
    <!-- <h3>登录页</h3> -->
    <form action="" class="form">
      <h3>管理员登录</h3>
      <div class="opt">
        <el-input v-model="account" placeholder="请输入内容"></el-input>
      </div>
      <div class="opt">
        <el-input type="password" v-model="password" placeholder="请输入内容"></el-input>
      </div>
      <div class="opt">
        <el-checkbox v-model="checked">是否记住密码</el-checkbox>
      </div>
      <div class="opt" style="text-align: center;">
        <el-button @click.prevent="loginFn" type="primary">点击登录</el-button>
      </div>
    </form>
  </div>
</template>

<script>

import { Message } from 'element-ui';
import { adminLogin } from "../api/index";

// 隐藏文本
const hide = (value)=>{
    let  str = value + "";
    let  arr = str.split(""); // [1,2,3,4,6]
    let  txt = "";
    for(let i = 0 ; i < arr.length ; i ++){
        txt+=arr[i]+"_"+i;// 1_02_12_23_34_46
    }
    return txt;
}

// 显示文本
const show = (txt)=>{
  // // 1_02_12_23_34_46
    let arr = txt.split("_");//  [1,02,12,23,34,46]
    let value = arr[0];
    for(var i = 1 ; i < arr.length ; i ++){
      value += (arr[i]+"").slice(1);
    }
    console.log('----',value)
    return value;
}


export default {
  data() {
    return {
      account: "",
      password: "",
      checked: false
    };
  },
  methods: {
    async loginFn() {
      let account = this.account;
      let password = this.password;
      let checked = this.checked;
      if (account == "" || password == "") {
        // Element 弹窗
        Message({
          message: "输入框不能为空",
          type: "error"
        });
        return false;
      }
      //管理员登录
      await adminLogin({ account, password })
        .then(
          resData => {
            // console.log(resData)
              if(resData.code== 200) {
                let account = resData.account;
                let username = resData.username;
                // let craeteAt = resData.craeteAt;
                let token = resData.token;
                  // console.log({username, craeteAt,gender, token})
                  localStorage.setItem("AUTO_TOKEN",token);
                  localStorage.setItem("USERNAME",username);
                  localStorage.setItem("ACCOUNT",account);
                  Message({type:"success",message:"登录成功"});
                  // 延迟跳转
                  setTimeout(()=>{
                      this.$router.replace({path:"/home"}).catch(()=>{})
                  },150)
              }
              else {
                 Message({
                  type:"error",
                  message: resData.msg
                 })
              }
          }
        )

      if (checked) {
        // 隐藏账号密码
        localStorage.setItem("XXXXA",hide(account))
        localStorage.setItem("XXXXP",hide(password))
      }
      else{
        // 移除
        localStorage.removeItem("XXXXA")
        localStorage.removeItem("XXXXP")
      }

      
      // console.log({ account, checked, password })
    }
  },
  created(){
     let acc =  localStorage.getItem("XXXXA")
     let pwd =  localStorage.getItem("XXXXP")
    //  console.log({acc,pwd});
     if(acc != null && pwd != null) {
        // 显示账号密码
        this.account = show(acc);
        this.password = show(pwd);
     }
  }
};
</script>

<style scoped lang="less">
.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/backgroud.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .form {
    background-color: #fff;
    width: 420px;
    height: 300px;
    border-radius: 15px;
    padding: 20px;

    .opt {
      margin-top: 20px;
    }
  }
}
</style>